.progress-indicator {
  display: flex;
  align-items: center;
  width: 100%;

  .close-button {
    margin-left: 8px;
    width: 12px;
    height: 12px;
    svg {
      width: 8px;
      height: 8px;
    }
  }
}

.progress-track {
  box-sizing: content-box;
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  width: 100%;
  border-radius: 6px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  background: $blue;
  height: 100%;
  transition: width 1000ms;
}

@keyframes fake-loading {
  from {
    width: 5%;
  }
  10% {
    width: 8%;
  }
  20% {
    width: 30%;
  }
  30% {
    width: 32%;
  }
  40% {
    width: 38%;
  }
  50% {
    width: 45%;
  }
  60% {
    width: 55%;
  }
  70% {
    width: 89%;
  }
  80% {
    width: 90%;
  }
  90% {
    width: 98%;
  }
  to {
    width: 100%;
  }
}
